<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>How to build an iPhone website</title>
    <meta name="author" content="will" />
    <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" />
    <meta name="description" content="Welcome to engege interactive on the iPhone!" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/template/engage.png"/>
    <style type="text/css">
        @import url("iphone.css");
    </style>
    <script>
function updateOrientation(){try{var a="show_normal";switch(window.orientation){case 0:a="show_normal";break;case -90:a="show_right";break;case 90:a="show_left";break;case 180:a="show_flipped";break}document.getElementById("page_wrapper").setAttribute("class",a)}catch(b){alert("ERROR:"+b.message)}}window.onload=function initialLoad(){try{loaded();updateOrientation()}catch(a){alert("ERROR:"+a.message)}};function loaded(){document.getElementById("page_wrapper").style.visibility="visible"};
</script>

</head>

<body onorientationchange="updateOrientation();">

    <div id="page_wrapper">
        <h1>Engage Interactive</h1>
        <div id="content_left">
                <p>You are now holding your phone to the left</p>
        </div>
        <div id="content_right">
                <p>You are now holding your phone to the right</p>
        </div>
        <div id="content_normal">
                <p>You are now holding your phone upright</p>
        </div>
        <div id="content_flipped">
                <p>This doesn't work yet, but there is a chance apple will enable it at some point, so I've put it in anyway. You would be holding your phone upside down if it did work.</p>
        </div>
    </div>

</body>
</html>